<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Comic Page Navigation Demo</title>
<style type="text/css">
body {
  background-color:#FFFFFF;
  padding:30px 50px;
  font:normal 12px 'Trebuchet MS',Arial,Sans-Serif;
  text-transform:uppercase;
}

a {
  color:black;
}

.img-show {
  width:400px;
  margin:50px auto;
  background-color:black;
  border:2px solid black;
  -webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.2);
  -moz-box-shadow:0px 1px 3px rgba(0,0,0,0.2);
  box-shadow:0px 1px 3px rgba(0,0,0,0.2);
  position:relative;
  overflow:hidden;
}

.img-show .img-holder {
  background-color:white;
}

.img-show .img-holder.loading {
  background:white url('img/loading.gif') no-repeat 50% 300px;
}

.img-show .img-holder img {
  display:block;
}

.img-show .img-nav {
  margin:0px 0px;
  padding:0px 0px;
  overflow:hidden;
}

.img-show .img-nav li {
  margin:2px 2px 0px 0px;
  padding:0px 0px;
  float:left;
  display:inline;
  list-style:none;
}

.img-nav li a {
  display:block;
  background-color:#ccc;
  color:black;
  padding:3px 7px;
  font:normal 12px Georgia,Serif;
  font-style:italic;
  text-decoration:none;
}

.img-nav li a.active {
  background-color:#900;
  color:white;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(function() {
	$('.img-gallery').each(function() {
		var w = $(this).data("width"),
			h = $(this).data("height"),
			viewport = $('html, body'),
			fadeSpeed = 400,
			resizeSpeed = 600;
		$(this).addClass('img-nav').wrap('<div class="img-show" style="width:' + w + 'px;"></div>');
		var $firstNav = $('li:first a', this),
			current = $firstNav.attr('href'),
			$parent = $(this).parents('.img-show');
		$firstNav.addClass('active');
		$parent.prepend('<div class="img-holder" style="height:' + h + 'px;"></div>');
		$parent.find('.img-holder').addClass('loading').html('<img class="transparent" src="' + current + '" alt="Loading..."/>');
		$parent.find('img.transparent').css('opacity', 0).load(function() {
			$parent.animate({width:$(this).width()}, resizeSpeed).find('.img-holder').animate({height:$(this).height()}, resizeSpeed, function() {
				$(this).removeClass('loading').find('img').animate({opacity:1}, fadeSpeed);
			});
		});
		
		$('a', this).each(function(i) {
			i = i+1;
			$(this).attr("title", $(this).text());
			$(this).html(i);
		}).on("click", function() {
			var $activeNav = $(this).parents('.img-gallery').find('a.active'),
				$activeParent = $(this).parents('.img-show');
			$activeNav.removeClass('active');
			viewport.scrollTop($activeParent.offset().top-40);
			$(this).addClass('active').parents('.img-show').find('.img-holder').html('<img class="transparent" src="' + this.href + '" alt="Loading..."/>');
			$parent.find('.img-holder').addClass('loading').find('img.transparent').css('opacity', 0).load(function() {
				$parent.animate({width:$(this).width()}, resizeSpeed).find('.img-holder').animate({height:$(this).height()}, resizeSpeed, function() {
					$(this).removeClass('loading').find('img').animate({opacity:1}, fadeSpeed);
				});
			});
			return false;
		});

	});
});
//]]>
</script>

</head>
<body>

<header>
	<h1>Demo Komik dengan Navigasi Halaman</h1>
	<p>Gambar: <a href="http://www.mangablank.com" rel="nofollow">MangaBLanK</a>, demo oleh <a href="http://hompimpaalaihumgambreng.blogspot.com/2012/06/solusi-untuk-masalah-blog-bertema-komik.html">BLoG AneH</a></p>
</header>

<ul class="img-gallery" data-width="750" data-height="1000">
<li><a href="http://lh6.googleusercontent.com/-FPGUj6dtMNg/USTy80fm7vI/AAAAAAAAOlY/iUSxpvooe7w/s1100/01.jpg">Halaman 1</a></li>
<li><a href="http://lh5.googleusercontent.com/-KZFCJZCcmYU/USTy9lJOGYI/AAAAAAAAOlk/VUf6nj41mck/s1100/02.jpg">Halaman 2</a></li>
<li><a href="http://lh4.googleusercontent.com/-ytbbAi4s18s/USTy9U56N3I/AAAAAAAAOlc/zMPFf-yzOZw/s1100/03.jpg">Halaman 3</a></li>
<li><a href="http://lh4.googleusercontent.com/-6n0sl05q9eg/USTzHKL_sqI/AAAAAAAAOmA/kTBFoAdpRaM/s1100/04.jpg">Halaman 4</a></li>
<li><a href="http://lh4.googleusercontent.com/-hh_dwXO_spI/USTzGG5jtQI/AAAAAAAAOlw/YoLH0K7j5pY/s1100/05.jpg">Halaman 5</a></li>
<li><a href="http://lh5.googleusercontent.com/--Y-wDUT4Yzg/USTzGlZGKjI/AAAAAAAAOl0/Vn1ncthH4vI/s1100/06.jpg">Halaman 6</a></li>
<li><a href="http://lh3.googleusercontent.com/-E4cvwGAcKp8/USTzlSClCAI/AAAAAAAAOmI/IsuRi34m_uk/s1100/07.jpg">Halaman 7</a></li>
<li><a href="http://lh6.googleusercontent.com/-djP7jiMduls/USTzn7Z2EFI/AAAAAAAAOmY/NeJaiDeDAgs/s1100/08.jpg">Halaman 8</a></li>
<li><a href="http://lh5.googleusercontent.com/-yRnbGv9tfHo/USTzm9dd4gI/AAAAAAAAOmQ/k8iyV09McBo/s1100/09.jpg">Halaman 8</a></li>
<li><a href="http://lh6.googleusercontent.com/-s5yxBoJzIBs/USTz2EAdD3I/AAAAAAAAOmg/fyJoeGLrU5I/s1100/10.jpg">Halaman 10</a></li>
<li><a href="http://lh4.googleusercontent.com/-vHowcpNWY2U/UST0xe4e6sI/AAAAAAAAOm4/QYvwZ4w0kjo/s1100/11.jpg">Halaman 11</a></li>
<li><a href="http://lh6.googleusercontent.com/-9oxfeZPLeNc/UST0vNx1RuI/AAAAAAAAOmw/cTvAqvtSSdM/s1100/12.jpg">Halaman 12</a></li>
<li><a href="http://lh4.googleusercontent.com/-IcaMkS0SFQw/UST0iQXOQjI/AAAAAAAAOmo/ZhbfV4rOunw/s1100/13.jpg">Halaman 13</a></li>
<li><a href="http://lh4.googleusercontent.com/-mfVqwqLtRX4/UST1NRJyiEI/AAAAAAAAOnA/mOEHx8BhGeg/s1100/14.jpg">Halaman 14</a></li>
<li><a href="http://lh4.googleusercontent.com/-k_NHLCABICc/UST1Q2AgrYI/AAAAAAAAOnI/k3SgKot0pJE/s1100/15.jpg">Halaman 15</a></li>
<li><a href="http://2.bp.blogspot.com/-bT24a9oCmGk/UKF42BkKQvI/AAAAAAAANRE/GzXxL47RLl8/s1100/credit-naruto.jpg">Halaman 16</a></li>
</ul>

</body>
</html>